<template>
	<view class="content">
		<view class="banner">
			<swiper v-if="detail.images.length > 0" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration">
				<swiper-item v-for="item in detail.images">
					<image :src="item" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<view class="box">
				<view class="name">
					{{detail.name}}
				</view>
			</view>
		</view>
		<view class="info" style="border-bottom: none;">
			<view class="address">
				<rich-text :nodes="detail.content"></rich-text>
			</view>
		</view>
		<view class="bottom">
			<view class="left">
				价格：<text class="green">￥{{detail.price}}</text>
			</view>
			<view class="right" @click="callPhone()">
				立即咨询
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				id: "",
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				productId: ""
			}
		},
		onLoad(options) {
			this.productId = options.id
			this.getDetail();
		},
		methods: {
			callPhone() {
				this.$post('index/getconfig', {
					key: "phone",
				}, (res) => {
					uni.makePhoneCall({
						phoneNumber: res //仅为示例
					});
				})
				
				
			},
			getDetail() {
				this.$get('index/goodsinfo', {
					id: this.productId,
				}, (res) => {
					this.detail = res
				})
			},
		}
	}
</script>

<style>
	page {
		background: #F3F3F3;
	}
	.content{
		padding-bottom: 130rpx;
	}
	.banner {
		background-color: #FFFFFF;
	}

	.banner image {
		width: 100%;
		border-bottom: 1px solid #E2E4EA;
		display: block;
		height: 850rpx;
	}

	.banner swiper {
		height: 850rpx;
	}

	.info {
		padding: 26rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		border-bottom: 1px solid #E2E4EA;
	}

	.info .box {}

	.info .name {
		font-size: 32rpx;
		color: #111111;
	}

	.info .address {
		color: #666666;
		font-size: 26rpx;
	}

	.info .distance {
		float: right;
		width: 140rpx;
		text-align: center;
	}

	.info .distance image {
		width: 48rpx;
		height: 48rpx;
		display: block;
		margin: 0 auto;
	}

	.info .distance text {
		font-size: 26rpx;
		color: #666666;
	}

	.phone {
		font-size: 32rpx;
		line-height: 100rpx;
		height: 100rpx;
		padding: 0 26rpx;
		background-color: #FFFFFF;
	}

	.phone image {
		width: 48rpx;
		height: 48rpx;
		float: right;
		margin-top: 26rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 120rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		line-height: 120rpx;
		background-color: #FFFFFF;
		width: 100%;
	}
	.bottom .left{
		float: left;
	}
	.bottom .left .green{
		color: #13AE4D;
	}
	.bottom .right{
		width: 400rpx;
		line-height: 88rpx;
		height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #13AE4D;
		border-radius: 88rpx;
		float: right;
		margin-top: 15rpx;
		font-size: 28rpx;
	}
</style>
